<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <!-- <link rel="stylesheet" href="datepicker/skin/WdatePicker.css"> -->
    <style>
      #box{
          width: 90%;
          margin: 0 auto;
      }
      #moban{
          display: none;
      }
      #mask{
            /* 注意这里定位要用固定定位，如果用绝对定位会出现滑动时下面的页面没有遮罩层 */
            position:fixed;
            /* position: absolute; */
			top:0;
			left:0;
			width:100%;
			height:100%;
			background-color:rgba(0,0,0,.5);
			display: none;
      }
      #pop{
			padding:20px 50px;
			width:600px;
			background-color:#fff;
			border-radius:10px;
			transform:translate(-50%,-50%);
			position:fixed;
			top:50%;
			left:50%;
			/* display: none; */
	 }
   #out{
     color:blue;
     text-decoration:underline;
     cursor: pointer;
   }
   #out:hover{
     color:brown;
   }
   span{
     font-size:20px;
   }
    </style>
</head>
<body>
   <div id="box">
    <h2>学生信息管理系统</h2>
    <span>欢迎</span> <span id="client"></span> <span id="out">退出登录</span>
    <button class="btn btn-primary" id="addStudent" style="float:right;">新增学生</button>
    <table class="table">
       <thead>
          <tr>
             <th>学号</th>
             <th>姓名</th>
             <th>年龄</th>
             <th>性别</th>
             <th>城市</th>
             <th>入学日期</th>
             <th>操作</th>
          </tr>
       </thead>
       <tbody class="data-wrap">
				<tr id="moban">
					<td class="data-id"></td>
					<td class="data-name"></td>
					<td class="data-age"></td>
					<td class="data-sex"></td>
					<td class="data-city"></td>
					<td class="data-joinDate"></td>
					<td>
						<button class="btn btn-primary data-edit">编辑</button>
						<button class="btn btn-danger data-delete">删除</button>
					</td>
				</tr>
	   </tbody>
    </table>
   </div>
   <!-- 遮罩层 -->
   <div id="mask">
       <div id="pop">
	     <h2>添加学生</h2>
	     <div class="form-horizontal">
		   <div class="form-group">
			<label for="data-name" class="col-sm-2 control-label">学生姓名</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="data-name" placeholder="学生姓名">
			</div>
		   </div>
		   <div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">年龄</label>
			<div class="col-sm-10">
				<input type="number" class="form-control" id="data-age" placeholder="年龄">
			</div>
		   </div>
		   <div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">性别</label>
			<label class="radio-inline">
				<input type="radio" name="sex" checked id="data-male">男
			</label>
			<label class="radio-inline">
				<input type="radio" name="sex" id="data-female">女
			</label>
		   </div>
		   <div class="form-group">
			<label class="col-sm-2 control-label">所在城市</label>
			<select name="" id="province"></select>
			<select name="" id="city"></select>
			<select name="" id="area"></select>
		   </div>
		   <div class="form-group">
			<label class="col-sm-2 control-label">入学日期</label>
			<div class="col-sm-10">
                <!-- 系统提供的日期空间，type="date"-->
				<input type="date" class="form-control" id="data-joinDate" placeholder="入学日期">
			</div>
		   </div>
		   <div class="form-group" style="float:right;margin-top:20px;">
			<button id="submit" class="btn btn-primary gai jia">确认添加</button>
			<button id="cancel" class="btn btn-default">取消</button>
    	   </div>
        </div>
       </div>
   </div>
   <!-- <div id="pop">
	   <h2>添加学生</h2>
	   <div class="form-horizontal">
		   <div class="form-group">
			<label for="data-name" class="col-sm-2 control-label">学生姓名</label>
			<div class="col-sm-10">
				<input type="text" class="form-control" id="data-name" placeholder="学生姓名">
			</div>
		   </div>
		   <div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">年龄</label>
			<div class="col-sm-10">
				<input type="number" class="form-control" id="data-age" placeholder="年龄">
			</div>
		   </div>
		   <div class="form-group">
			<label for="data-age" class="col-sm-2 control-label">性别</label>
			<label class="radio-inline">
				<input type="radio" name="sex" checked>男
			</label>
			<label class="radio-inline">
				<input type="radio" name="sex" id="data-female">女
			</label>
		   </div>
		   <div class="form-group">
			<label class="col-sm-2 control-label">所在城市</label>
			<select name="" id="province"></select>
			<select name="" id="city"></select>
			<select name="" id="area"></select>
		   </div>
		   <div class="form-group">
			<label class="col-sm-2 control-label">入学日期</label>
			<div class="col-sm-10">
				<input type="input" class="form-control" id="data-joinDate" placeholder="入学日期">
			</div>
		   </div>
		   <div class="form-group" style="float:right;margin-top:20px;">
			<button id="submit" class="btn btn-primary">确认添加</button>
			<button id="cancel" class="btn btn-default">取消</button>
    	   </div>
       </div>
   </div> -->
   <script src="jquery.min.js"></script>
   <script src="citys.js"></script>
   <script src="ssq.js"></script>
   <!-- 日期库引入失败？ -->
   <script src="datepicker/wdatepicker.js"></script>
   <script>
    //  刚进入页面先读取本地存储
    console.log(document.cookie)
    if(document.cookie.length===0){
      if(confirm("点确定前往登录页面，取消前往注册页面")){
        location.href="denglu.html"
      }
      else{
        location.href="login.html"
      }
    }
    else{
     //   进入页面向后端发送请求读取数据库，并将数据插入页面中
      $.ajax({
          url:"http://10.35.170.247:8080/load",
          success(data){
            //   console.log(data)
            data.forEach(item=>{
                console.log(item.id)
                let newtr=$("#moban").clone(true)
                newtr.attr("id","")
                console.log(newtr)
                newtr.find(".data-id").html(item.id)
                newtr.find(".data-name").html(item.name)
                newtr.find(".data-age").html(item.age)
                newtr.find(".data-sex").html(item.sex?"男":"女")
                newtr.find(".data-city").html(item.city)
                newtr.find(".data-joinDate").html(item.joinDate)
                $("tbody").append(newtr)
            })
          }
      })
     //   删除请求
      $(".data-delete").click(function(){
        //   this的指向
          let now=$(this)
        if(confirm("确定删除操作")){
           $.ajax({
              url:"http://10.35.170.247:8080/delete",
              data:{
                  id:$(this).closest("tr").find(".data-id").html()
              },
              success(data){
                  if(data==="success"){
                    //   先淡出，再删除，fadeOut就有删除的效果
                      now.closest("tr").fadeOut(function(){
                          now.closest("tr").remove()
                      })
                  }
              }
          })
        }
      })  
     //  取消,遮罩层消失
      $("#cancel").click(function(){
        $("#mask")[0].style.display="none"
      })
     //   新增学生
      $("#addStudent").click(function(){
          $("#mask")[0].style.display="block"  
          $("#pop h2").html("添加学生")
          $(".gai").html("确认添加")
          $("#data-age").val("")
          $("#data-name").val("")
          $("#data-male")[0].checked=true
      })
     // 编辑学生
      $(".data-edit").click(function(){
        $("#mask")[0].style.display="block"
        $("#pop h2").html("编辑学生信息")
        $(".gai").html("确认修改")
        id=$(this).closest("tr").find(".data-id").html()
        pastname=$(this).closest("tr").find(".data-name").html()
        pastage=$(this).closest("tr").find(".data-age").html()
        if($(this).closest("tr").find(".data-sex").html()==="男"){
          pastsex=1
        }
        else{
          pastsex=0
        }
        pastcity=$(this).closest("tr").find(".data-city").html()
        pastjoinDate=$(this).closest("tr").find(".data-joinDate").html()
        // 设置编辑框的内容
        $("#data-name").val(pastname)
        $("#data-age").val(pastage)
        if(pastsex===0){
          // 修改单选框的状态
          $("#data-female")[0].checked=true
        }
        // console.log(citys)
        // let sheng=pastcity.slice(0,3)
        // let shi=pastcity.slice(3,6)
        // let qu=pastcity.slice(6,9)
        // console.log(shi)
        // console.log(qu)
        // ???????????????????????????不会
        // citys.forEach(function(item,index){
        //   console.log(sheng)
        //   if(item.provinceName===sheng){
        //     console.log("找到")
        //     console.log(index)
            
        //     return
        //   }
        // })
        
      })
     // 点击$("#submit")按钮判断是新增还是修改
      $("#submit").click(function(){
         if($("#pop h2").html()==="添加学生"){
            // 判断只要内容不为空，才可继续执行 
              if($("#data-name").val()&&$("#data-age").val()){
                  $.ajax({
                      url:"http://10.35.170.247:8080/add",
                      data:{
                          name:$("#data-name").val(),
                          age:$("#data-age").val(),
                        //   单选框原生节点的checked属性，如果被默认选中，则返回true,否则返回false
                          sex:$("#data-female")[0].checked?0:1,
                        //   单选框内容拼接
                          city:$("#province").val() + $("#city").val() + $("#area").val(),
                          joinDate:$("#data-joinDate").val()
                      },
                      success(data){
                        if(data==="success"){
                          // 刷新页面
                          history.go(0)
                        }
                      }
                  })
              }
         }
         if($("#pop h2").html()==="编辑学生信息"){
           // 判断只要内容不为空，才可继续执行 
              if($("#data-name").val()&&$("#data-age").val()){
                  $.ajax({
                      url:"http://10.35.170.247:8080/update",
                      data:{
                          id,
                          newname:$("#data-name").val(),
                          newage:$("#data-age").val(),
                        //   单选框原生节点的checked属性，如果被默认选中，则返回true,否则返回false
                          newsex:$("#data-female")[0].checked?0:1,
                        //   单选框内容拼接
                          newcity:$("#province").val() + $("#city").val() + $("#area").val(),
                          newjoinDate:$("#data-joinDate").val()
                      },
                      success(data){
                          if(data==="success"){
                            // 修改成功刷新页面
                            history.go(0)
                          }
                      }
                  })
              }
         }
      })
     // 退出登陆到登陆页面
      $("#out").click(function(){
        location.href="denglu.html"
      })
    }
   </script>
</body>
</html>